import React from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import { Spin } from 'antd';
import Inquiry from '../../../shared/inquiry';
import { contractsApi } from '../../../shared/api';
import './index.less';

export default class ContractManage extends React.PureComponent {
  constructor() {
    super();
    this.state = {
      peopleContractList: [],
      spinning: true,
    };
  }
  componentDidMount() {
    axios.get(contractsApi)
      .then((response) => {
        this.setState({ peopleContractList: response.data.data, spinning: false });
      });
  }
  Query = (data) => {
    this.setState({ spinning: true });
    const params = {};
    for (const key in data) {
      if (data[key]) {
        params[key] = data[key];
      }
    }
    axios.request({
      url: contractsApi,
      method: 'get',
      params,
    })
      .then((response) => {
        this.setState({ peopleContractList: response.data.data, spinning: false });
      });
  };
  clearInput=() => {
    
  }
  render() {
    const { peopleContractList } = this.state;
    return (
      <div className="content">
        <Spin spinning={this.state.spinning}>
          <div>
            <h3>合同管理</h3>
          </div>
          <Inquiry Query={this.Query} clearInput={this.clearInput} />
          <div className="tableCenten">
            <table>
              <thead>
                <tr>
                  <th className="w50">序号</th>
                  <th className="w80">姓名</th>
                  <th className="w80">员工编号</th>
                  <th className="w200">身份证号</th>
                  <th>合同编号</th>
                  <th className="w120">合同类型</th>
                  <th>首次签约时间</th>
                  <th>签约时间</th>
                  <th>到期时间(合同期限)</th>
                  <th>描述/备注</th>
                  <th className="w120">
                    <Link to="/Contract/ContractListManage/ContractManageForm" className="addButton">添加</Link>
                  </th>
                </tr>
              </thead>
              <tbody>
                {
                    peopleContractList.map((value, index) => (
                      <tr key={index}>
                        <td>{index + 1}</td>
                        <td>{value.user.name}</td>
                        <td>{value.user.id}</td>
                        <td>{value.user.idcard}</td>
                        <td>{value.number}</td>
                        <td>{value.category.name}</td>
                        <td>{value.first_mfd_date}</td>
                        <td>{value.first_mfd_date}</td>
                        <td>{value.mfd_date}</td>
                        <td />
                        <td>
                          <Link className="sure-button" to={`/Contract/ContractListManage/ContractManageForm/${value.id}`}>编辑</Link>
                        </td>
                      </tr>
                    ))
                  }
              </tbody>
            </table>
          </div>
        </Spin>
      </div>
    );
  }
}
